{% extends 'layout/basic.html' %}
{% load static %}


{% block css %}
    <style>
    @font-face {
    font-family: 'MyFont';
    src: url("{% static "font/Font1.ttf" %}") format('truetype');
    }
    body{
        background-color: #ffcc00;
    }
    /* 样式用于固定在顶部的标题栏 */
    .fixed-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: #f5ebdc; /* 你可以根据需要更改背景颜色 */
        color: #502314; /* 设置标题栏文本颜色 */
        padding: 10px;
        display: flex;
        align-items: center;
        z-index: 100;
    }
    .fixed-header h1{
        font-family: 'MyFont', Arial, sans-serif;
        font-size: 50px;
        margin: 0 auto; /* 设置左外边距为自动，将文本水平居中 */
        max-width: 40%; /* 设置最大宽度为窗口宽度的50% */
    }
    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        font-size: 20px;
        font-family: 'MyFont', Arial, sans-serif;
        display: none;
        position: absolute;
        background-color: #fff; /* 下拉菜单的背景颜色 */
        box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
        border: 1px solid #ccc; /* 边框 */
        border-radius: 20px; /* 圆角 */
        width: 150px;
    }

    .dropdown-content a {
        color: #502314;
        padding: 8px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {
        background-color: #ffAA00; /* 鼠标悬停时的背景颜色 */
        border: 1px solid #fff; /* 边框 */
        border-radius: 15px; /* 圆角 */
    }

    .dropdown:hover .dropdown-content {
        display: block;
        border: 1px solid #ffAA00; /* 边框 */
        border-radius: 15px; /* 圆角 */
    }
    .name{
        margin-top: 50px;
        background-color: #502314;
        font-size: 35px;
        font-weight: bold;
        color: #f5ebdc;
        margin-left: 120px;
        margin-right: 120px;
        padding: 10px;
        height: 80px;
        border-radius: 15px; /* 圆角 */
        align-items: center;
        text-align: center;
    }
    .top_words{
        margin-top: 35px;
        margin-left: 120px;
        margin-right: 120px;
        padding-top: 30px;
        padding-bottom: 30px;
        display: flex;
        align-items: baseline;
        background-color: #f5ebdc;
        border-radius: 15px; /* 圆角 */
    }
    .top_words img{
        width: 350px;
        /* 调整图像和文字段之间的间距 */
        margin: 18px 50px 18px 18px;
    }
    .description span {
        color: #502314;
        display: inline-block; /* 使span元素变成块级元素，以应用垂直对齐样式 */
        vertical-align: bottom; /* 控制文字段垂直对齐方式 */
        font-size: 18px;
        margin-bottom: 10px;
        margin-right: 50px;
    }
    .slogan {
        margin-top: 20px;
        font-size: 60px;
        color: rgba(122, 54, 31, 0.99);
        text-align: center;
        line-height: 2;
        transition: all 0.8s; /* 添加过渡效果 */
        transform: translateY(0); /* 初始状态为不移动 */
    }
    .slogan.animate {
        transform: translateY(-20px)scale(1.2); /* 向上蹦跳、变大 */
    }
    .table-title{
        font-size: 30px;
        color: #502314;
        text-align: left;
        margin-left: 120px;
        margin-top: 20px;
        font-weight: bold;
    }
    .container {
        box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
        margin: 15px 120px 30px;
        background-color: #ffAA00;
        border-radius: 15px;
        padding-top: 6px;
        padding-left: 15px;
        padding-right: 15px;
        width: calc(100% - 240px); /* 减去左右的边距 */
        max-width: calc(100% - 240px); /* 如果有必要限制最大宽度 */
    }
    .container table {
        position: relative;
        border-collapse: separate;
        border-spacing: 0 20px;
        border-color: #ffff00;
        border-radius: 15px;
    }
    /* Style table headers */
    .table th {
        color: #502314;
        font-size: 18px;
        height:50px;
        background-color: #f5ebdc;
        text-align: left;
        padding: 12px;
        font-weight: bold;
    }
    .table td{
        color: #502314;
        font-size: 16px;
        font-weight: bold;
        padding: 12px;
        text-align: left;
        vertical-align: top;
        border-bottom: 1px solid #ffAA00;
    }
    .table tbody tr td:first-child{
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }
    .table tbody tr td:last-child {
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    }
    .table thead tr th:first-child{
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }
    .table thead tr th:last-child {
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    }



    .table tbody tr {
        background-color: #f5ebdc;
        height: 80px; /* 根据需要调整间距大小 */
    }

    .table tbody tr:hover {
        background-color: #ffAA00; /* Change the background color on hover */
        transform: translateY(-4px); /* Lift the row more on hover */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Add a stronger shadow */
        transition: transform 0.5s ease, box-shadow 0.5s ease, background-color 0.5s ease; /* Smooth transition effect */
    }
    .table td:last-child {
        font-weight: bold;
    }
    .like-wrapper {
    position: relative;
    }

    .like {
        font-family:'MyFont', Arial, sans-serif ;
        color: #f5ebdc;
        font-size:70px;
        padding: 18px 50px;
        margin-left: 120px;
        margin-top: 0;
        margin-bottom: 50px;
        background-color: #502314; /* 褐色背景 */
        width: 240px; /* 宽度可调整 */
        height: 240px; /* 高度可调整 */
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2; /* 确保它在图片之上 */
        border-radius: 25px;
    }
    .bottom-words {
        margin-top: 20px;

        margin-left: 120px;
        margin-right: 120px;
        position: relative;
        height: 200px; /* 根据实际需要调整高度 */
    }
    .like_picture{
        height: 200px;
        display: block; /* 确保图片独占一行 */
        margin-bottom: 5px; /* 图片和文本之间的间距 */
        width: 240px; /* 设置图片宽度 */
    }
    .card_content {
        font-weight: bold;
        color: rgba(122, 54, 31, 0.99);
        font-size: 20px;
        position: absolute;
        top: 0;
        left: 0; /* 初始时所有卡片叠在一起 */
        transition: left 0.5s ease-in-out; /* 平滑滑动效果 */
        display: inline-block; /* 使卡片水平排列 */
        vertical-align: top; /* 确保卡片顶部对齐 */
        margin-right: 10px; /* 添加右边距以分隔卡片 */
    }
    .line{
        text-align: center;
        color: #502314;
        font-size: 15px;
        font-weight: bold;
        margin-top: 120px;
        margin-bottom: 10px;
    }
    .welcome{
        font-family:'MyFont', Arial, sans-serif ;
        text-align: center;
        color: #502314;
        font-size: 35px;
        margin-bottom: 40px;
    }




</style>
{% endblock %}


{% block content %}
    <body>
    <div class="fixed-header">
        <div class="dropdown" onmouseleave="hideDropdown()">
             <img src="{% static "buttons/menu-burger.png" %}" alt="按钮图片" onclick="showDropdown()" />
            <div class="dropdown-content">
                <a href="{% url 'order_menu' %}">返回餐厅</a>
                <a href="/user/login">前去登录</a>
            </div>
        </div>
        <h1>美食详情</h1>
    </div>
    <div class="name">{{ item.name }}</div>
    <div class="top_words">
        <img src="{% static item.img_url %}" width="270">
        <div class="description">
            <span>{{ item.description }}</span>
        </div>
    </div>

    <div class="table-title">营养价值</div>
    <div class="container">
        <table class="table">
            <thead>
                <tr>
                    <th>营养成分</th>
                    <th>数值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>能量</td>
                    <td>{{ item.value1 }}千焦</td>
                </tr>
                <tr>
                    <td>蛋白质</td>
                    <td>{{ item.value2 }}克</td>
                </tr>
                <tr>
                    <td>脂肪</td>
                    <td>{{ item.value3 }}克</td>
                </tr>
                <tr>
                    <td>碳水化合物</td>
                    <td>{{ item.value4 }}克</td>
                </tr>
                <tr>
                    <td>钠</td>
                    <td>{{ item.value5 }}毫克</td>
                </tr>
                <tr>
                    <td>钙</td>
                    <td>{{ item.value6 }}毫克</td>
                </tr>
            </tbody>
            </table>
        </div>
    <div class="slogan">
        {{ item.slogan }}
    </div>
    <div class="like-wrapper">
        <div class="like">猜你喜欢</div>
        <div class="bottom-words">
            {% for i in next_item %}
                <div class="card_content">
                    <img class="like_picture" src="{% static i.img_url %}" width="270">
                {{ i.name }}
                </div>
            {% endfor %}
        </div>
    </div>
    <div class="line">———————————————————————————————— {{ item.name }} ————————————————————————————————</div>
    <div class="welcome">\欢迎您来/</div>
    </body>
{% endblock %}


{% block js %}
    <script>
        const slogan = document.querySelector(".slogan");
        let isAnimating = false;
        window.addEventListener("scroll", () => {
            if (!isAnimating) {
                if (window.scrollY > slogan.offsetTop - window.innerHeight) {
                    slogan.classList.add("animate");
                    isAnimating = true;
                }
            } else {
                if (window.scrollY < slogan.offsetTop - window.innerHeight) {
                    slogan.classList.remove("animate");
                    isAnimating = false;
                }
            }
        });
        function showDropdown() {
            const dropdownContent = document.querySelector(".dropdown-content");
            if (dropdownContent.style.display === "block") {
                dropdownContent.style.display = "none";
            } else {
                dropdownContent.style.display = "block";
            }
        }
        function hideDropdown() {
            const dropdownContent = document.querySelector(".dropdown-content");
            dropdownContent.style.display = "none";
        }
        const menuItems = document.querySelectorAll(".dropdown-content a");

        menuItems.forEach(item => {
            item.addEventListener("click", function(e) {
                e.preventDefault(); // 阻止默认链接行为
                const href = item.getAttribute("href");
                window.location.href = href; // 导航到点击链接的网页
            });
        });
        document.addEventListener('scroll', function() {
            const cards = document.querySelectorAll('.card_content');
            cards.forEach((card, index) => {
                if (isElementInViewport(card)) {
                    setTimeout(() => {
                    card.style.left = (index *25) + '%'
                    }, 80 * index); // 为每个卡片设置不同的延迟
                }else{
                    card.style.left = '0'
                }
            });
        });

        function isElementInViewport(el) {
            const rect = el.getBoundingClientRect();
            return (
                rect.top >= 0 &&
                rect.left >= 0 &&
                rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                rect.right <= (window.innerWidth || document.documentElement.clientWidth)
            );
        }

    </script>
{% endblock %}